<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加商品</title>
	<style>
		#uad {
			margin: 20px;
			padding: 20px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #f9f9f9;
			
		}
		label {
			display: block;
			margin-bottom: 10px;
			font-weight: bold;
		}
		input[type="text"], select {
			display: block;
			margin-bottom: 10px;
			padding: 5px;
			border: 1px solid #ccc;
			border-radius: 3px;
			width: 100%;
			box-sizing: border-box;
		}
		input[type="button"] {
			background-color: #fbc2eb;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 3px;
			cursor: pointer;
		}
		input[type="button"]:hover {
			background-color: rgb(255, 128, 192);
		}
	</style>
	<script type="text/javascript" src="js/vue-2.6.10.js"></script>
	<script type="text/javascript" src="js/axios.js"></script>
</head>
<body>
	<div id="uad">
		<label for="uName">姓 名：</label>
		<input type="text" id="uName" name="uName" v-model='user.uName' required>
				
		<label for="uPhone">电话：</label>
		<input type="text" id="uPhone" name="uPhone" v-model='user.uPhone' required>
				
		<label for="uAddress">地 址：</label>
		<input type="text" id="uAddress" v-model='user.uAddress' name="uAddress" v-model='user.uAddress' required>
				
		<label for="uSex">性 别：</label>
		<select id="uSex" v-model='user.uSex' name="uSex" required>
		<option value="男">男</option>
		<option value="女">女</option>
		</select>
		<input type="button" value="保存" @click="adduser" >
	</div>
	
	<script type="text/javascript">
		
		
		let vue = new Vue({
  		  el:'#uad',
  		  data:{
  			  user:{
  				  
  				  uName:'',
  				  uPhone:'',
  				  uAddress:'',
  				  uSex:''
  				  
  				  
  			  }
  		  },
  		  
  		   created(){
  			 
  			  
  		  },
  		  
  		  methods: {
  			 adduser: function(){
  				param = "uName="+vue.user.uName+"&uPhone="+vue.user.uPhone+"&uAddress="+vue.user.uAddress+"&uSex="+vue.user.uSex;
  				axios.post('/OrderServert/user.do?'+param).then(
	  				function(res_obj){
	  					
	  					window.location.href="user.html";
	  				}	  
	  			  ).catch(
							function(error_obj){
								alert("数据加载异常！！！");
							}
					)
  			  }
  			  
  		  }
  	  });
	</script>
</body>
</html>